{% extends 'base.html' %}
{% block head %}
        <style>
            table.schedule {
                table-layout: fixed;
                font-size: 10px;
                border: 1px;
                width: 100%;
            }
            table.schedule td {
                min-width: 20px;
                width: 20px;
                border: 1px solid black;
            }
            table.schedule > tr > td:first {
                min-width: 10px;
                width: 10px;
            }
            #display-data {
                margin: 15px;
            }
        </style>
        <script>
            $(document).ready(function () {
                function snipRows() {
                    //TODO: Get rid of rows in a row that have nothing in them
                }

                /*
                 * Show the list of courses you have in your schedule
                 * and bind the 'remove' button.
                 */
                function loadCourseList(data) {
                    if (data) {
                        $('#display-data').html(data);
                    }
                    //remove the currently generated schedule -- we're changing the course list
                    //so it's no longer valid.
                    //NEVERMIND we don't like this
                    //$('#schedule').html('');

                    //if the user clicks "remove", make a request to /remove_course/{cid} and
                    //then put the response here
                    $('#display-data').find('a.remove-course').click(function (event) {
                        event.preventDefault();
                        $.get($(this).attr('href'), loadCourseList);

                        //don't actually follow the link, this is ajax
                        return false;
                    });
                }
                //If a user adds a course, make the request to /add_course/{cid} and
                //put the response (a list of courses) here and then bind
                //the remove button
                $('#add-course').submit(function (event) {
                    var cid = $('select', this).val();
                    $.get('/add_course/' + cid + '/', loadCourseList);

                    //don't actually follow the link, this is ajax
                    return false;
                });
                $('#gen-schedule').submit(function (event) {
                    var semester = $(this).serialize();
                    var loadSchedule = function (data) {
                        //swap in the returned data into the #schedule div
                        $('#schedule').html(data);

                        //bind the next,prev buttons
                        $('.next-schedule').click(function (event) {
                            $.get($(this).attr('href'), semester, loadSchedule);

                            //don't actually follow the link, this is ajax
                            return false;
                        });
                        $('.prev-schedule').click(function (event) {
                            $.get($(this).attr('href'), semester, loadSchedule);

                            //don't actually follow the link, this is ajax
                            return false;
                        });

                        //if the user clicks 'print', remove everything on the page but
                        //the schedule itself, and then make the print popup show.
                        $('#print').click(function (event) {
                            $('body')
                                .html("<table class='schedule'>" + $('table.schedule').html() + "</table>")
                                .css({'background': 'none'});
                            print();
                        });
                    };

                    //actually make the request to /generate/ here.
                    $.get('/generate/', semester, loadSchedule);

                    //Don't actually submit; this is an ajax request
                    return false;
                });
                loadCourseList();
            });
        </script>
{% endblock %}
{% block body %}
<img src="/static/images/create.png" alt="create"/>
    <form id='add-course'>
    <select id='course-select'>
        {% for c in allcourses %}
        <option value='{{ c.pk }}' name='cid'>{{ c }}</option>
        {% endfor %}
    </select>
    <input type='submit' value='Add course!'/>
    </form>
    <form id='gen-schedule'>
        <label>I want to generate a schedule for the</label>
        <select name='semester'>
            {% for semestervalue, semestername in semesters %}
            {% if semestervalue == defaultsemester %}
            <option selected='selected' value='{{ semestervalue }}'>{{ semestername }}</option>
            {% else %}
            <option value='{{ semestervalue }}'>{{ semestername }}</option>
            {% endif %}
            {% endfor %}
        </select>
        semester.
        <br/>
        <label>I don't want classes that start before:</label>
        <select name='earliest'>
            {% for timeopt in timeopts %}
            <option value='{{ timeopt }}'>{{ timeopt }}</option>
            {% endfor %}
        </select>
        <br/>
        <label>and I don't want to be in class after:</label>
        <select name='latest'>
            {% for timeopt in timeopts %}
            {% if forloop.last %}
            <option selected='selected' value='{{ timeopt }}'>{{ timeopt }}</option>
            {% else %}
            <option value='{{ timeopt }}'>{{ timeopt }}</option>
            {% endif %}
            {% endfor %}
        </select>
        <br/>
        <input type='submit' value='Generate schedule!'/>
    </form>
    <div id='display-data'>
        {# show which courses the user has already #}
        {% include "add_course.html" %}
    </div>
    <div id='schedule'>
    </div>
{% endblock %}
